<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="back" @click="navigateBack">
        <uni-icons type="left" size="20" color="#fff"></uni-icons>
      </view>
      <view class="title">我的车辆</view>
      <view class="right">
        <uni-icons type="more-filled" size="20" color="#fff"></uni-icons>
      </view>
    </view>

    <!-- 背景色块 -->
    <view class="bg"></view>

    <!-- 空状态展示 -->
    <view class="empty-state" v-if="carList.length === 0">
      <image class="empty-image" src="/static/empty-car.png" mode="aspectFit"></image>
      <text class="empty-text">暂无车辆信息</text>
    </view>

    <!-- 车辆列表 -->
    <view class="car-list" v-else>
      <view class="car-item" v-for="car in carList" :key="car.id">
        <view class="car-info">
          <image class="car-image" :src="car.image" mode="aspectFill"></image>
          <view class="info-content">
            <view class="car-type">{{ car.type }}</view>
            <view class="car-number">{{ car.plateNumber }}</view>
            <view class="car-owner">
              <text>车主：{{ car.ownerName }}</text>
              <text class="phone">{{ car.phone }}</text>
            </view>
          </view>
        </view>
        <view class="action-buttons">
          <button class="action-btn edit" @click="handleEditCar(car)">编辑</button>
          <button class="action-btn delete" @click="handleDeleteCar(car)">删除</button>
        </view>
      </view>
    </view>

    <!-- 底部添加按钮 -->
    <view class="bottom-btn">
      <button class="add-btn" @click="navigateToAddCar">
        <text class="plus">+</text>
        <text>添加车辆</text>
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

// 响应式数据
const carList = ref([
  {
    id: 1,
    type: '宝马 3系',
    plateNumber: '豫A·12345',
    ownerName: '张先生',
    phone: '138****8888',
    image: '/static/yhj/car1.jpg'
  },
  {
    id: 2,
    type: '奥迪 A6L',
    plateNumber: '豫B·67890',
    ownerName: '李先生',
    phone: '139****9999',
    image: '/static/yhj/car1.jpg'
  }
]);

// 导航返回
const navigateBack = () => {
  uni.navigateBack();
};

// 跳转到添加车辆页面
const navigateToAddCar = () => {
  uni.navigateTo({
    url: '/pages/yhj/addcar/addcar'
  });
};

// 编辑车辆
const handleEditCar = (car) => {
  uni.navigateTo({
    url: `/pages/yhj/editcar/editcar?id=${car.id}`
  });
};

// 删除车辆
const handleDeleteCar = (car) => {
  uni.showModal({
    title: '提示',
    content: `确定要删除车牌号为 ${car.plateNumber} 的车辆吗？`,
    success: (res) => {
      if (res.confirm) {
        carList.value = carList.value.filter(item => item.id !== car.id);
        uni.showToast({
          title: '删除成功',
          icon: 'success'
        });
      }
    }
  });
};

// 页面加载钩子
onLoad(() => {
  // 可以在这里初始化数据或从后端获取车辆列表
  // fetchCarList();
});
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 100px;
}

.nav-bar {
  display: flex;
  align-items: center;
  height: 44px;
  background-color: #007AFF;
  color: #fff;
  padding: 0 15px;
  
  .back, .right {
    width: 44px;
  }
  
  .title {
    flex: 1;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
  }
  
  .right {
    text-align: right;
  }
}

.bg {
  width: 100%;
  height: 250rpx;
  background-color: #007AFF;
}

.empty-state {
  margin: 10px 10px 0;
  margin-top: -200rpx;
  border-radius: 20px 20px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 150px;
  background-color: #fff;
  
  .empty-image {
    width: 200px;
    height: 200px;
    margin-bottom: 20px;
  }
  
  .empty-text {
    font-size: 14px;
    color: #999;
  }
}

.car-list {
  margin: 10px 10px 0;
  margin-top: -200rpx;
  border-radius: 20px 20px 0 0;
  padding: 15px;
  background-color: #fff;
  
  .car-item {
    background-color: #fff;
    border-radius: 8px;
    margin-bottom: 15px;
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    
    .car-info {
      display: flex;
      margin-bottom: 15px;
      
      .car-image {
        width: 120px;
        height: 80px;
        border-radius: 4px;
        margin-right: 15px;
      }
      
      .info-content {
        flex: 1;
        
        .car-type {
          font-size: 16px;
          color: #333;
          font-weight: 500;
          margin-bottom: 8px;
        }
        
        .car-number {
          font-size: 20px;
          color: #007AFF;
          font-weight: bold;
          margin-bottom: 8px;
        }
        
        .car-owner {
          font-size: 14px;
          color: #666;
          display: flex;
          align-items: center;
          
          .phone {
            margin-left: 15px;
          }
        }
      }
    }
    
    .action-buttons {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      
      .action-btn {
        min-width: 80px;
        height: 32px;
        line-height: 32px;
        font-size: 14px;
        border-radius: 16px;
        margin: 0;
        padding: 0 15px;
        
        &.edit {
          background-color: #007AFF;
          color: #fff;
        }
        
        &.delete {
          background-color: #fff;
          color: #FF3B30;
          border: 1px solid #FF3B30;
        }
      }
    }
  }
}

.bottom-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  
  .add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 44px;
    background-color: #007AFF;
    color: #fff;
    border-radius: 22px;
    font-size: 16px;
    
    .plus {
      font-size: 20px;
      margin-right: 5px;
    }
  }
}
</style>